<template>
  <div  class='relative'>
     <a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'>
      <a-row>
        <a-form :layout="formLayout"  :form="form" >
            <a-form-item
                label="资产名称"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                   {{baseform.name}}
            </a-form-item>  
          <a-form-item
                label="项目类型"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              > 
              {{baseform.type | propertyType}}
              </a-form-item>
              <a-form-item
                label="项目规模（万元）"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >     
                  {{baseform.prjSize}} 
              </a-form-item>
            <a-form-item
                label="融资主体性质"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              > 
                   {{baseform.financingSubjectNature | financingSubjectNature}} 
              </a-form-item>
              <a-form-item
                label="所属集团"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                  {{baseform.affiliatedGroup}}  
              </a-form-item>
              <a-form-item
                label="存续周期（月）"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                  {{baseform.subsistingCycle}}  
              </a-form-item>
               
              <a-form-item
                label="期望募集周期"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                  {{baseform.expectRecruitmentCycle}}  
              </a-form-item>
              
              <a-form-item
                label="募集路径"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                  {{baseform.collectionAmtType | collectionAmtType}}  
              </a-form-item>

              <a-form-item
                label="发行方"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                  {{baseform.issuer}}  
              </a-form-item>
              <a-form-item
                label="增信方"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                  {{baseform.increasingCredit}}   
              </a-form-item> 
              <a-form-item
                label="期望募集开始日期"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                  {{baseform.expectStartDate  |  formatDates}}  
              </a-form-item>
              <a-form-item
                label="资产发行结构图"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                <div  class='mt20'  v-if='baseform.imageList && baseform.imageList.length>0'>
                   <img  :src='imgsrc' style="max-width: 100%">
                </div>
              </a-form-item>
              <a-form-item
                label="可见用户组"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                   <a-checkbox-group :options="plainOptions" :value="roleList"  />
              </a-form-item>

          <a-form-item
            label="相关资料"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <ul>
              <li  v-for='item  in  baseform.fileVOList'><a-icon type="paper-clip" />
                 {{item.name}}    <span  class='fr'  title='下载'><a-icon type="download"  @click='downloadFile(item.code)'  /></span>
              </li>
            </ul> 
          </a-form-item>

          </a-form>
      </a-row>
     </a-spin>
  </div>
</template>

<script>
import { RoleList }  from  '@/api/system/index'
import  { detailProperty }  from  '@/api/property/index' 
export default {
  name: 'propertyInfo',
  data () {
    return {
      indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' }"/> ,
      spinning:false,
      formLayout:'horizontal',
      plainOptions:[],/*角色列表 多选框*/ 
      roleList:[],
      imgsrc:process.env.BASE_API+'/op/fileupload/download_file?token='+sessionStorage.getItem('tokenId')+'&fileCode=',//

      baseform:{},                                                      
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  created(){
    this.code = this.$route.query.code
    this.pageInit()
  },
  methods:{
     pageInit(){
      let that = this
      this.spinning = true
      function role(){ 
        return  new Promise((resolve,reject)=>{
            RoleList({pageSize:100}).then((res)=>{
              if(res.data.flag == true){
                resolve(res.data.dataList)
              }
              else{
                reject()
              } 
            })
          })
      }
      function detail(){
        return  new Promise((resolve,reject)=>{
            detailProperty(that.code).then((res)=>{
                  if(res.data.flag == true){
                    resolve(res.data.data)
                  }
                  else{
                    reject()
                  }
              })
          }) 
      }

      /*先获得option数据*/
      role().then(function(data){
        // console.log(data)
        that.plainOptions = data.map((item)=>{
            return {
              label:item.name,
              value:item.code,
            }
          })
        /*获取detail*/
        return detail()
      }).then(function(data){
          that.baseform = data

          //返回流程图
          if(that.baseform.imageList && that.baseform.imageList.length>0){
            that.imgsrc+=that.baseform.imageList[0].code
          }
          /*角色信息回填*/ 
          that.roleList = this.Recontent_fromcode(data.roleList) 

          that.spinning = false
      }).catch((error)=>{
          that.spinning = false
      }) 
    },
    
  },
  computed: {
    formItemLayout () {
      const { formLayout } = this;
      return formLayout === 'horizontal' ? {
      labelCol: {md:{span:5},lg:{ span: 7 }},  //label 标签布局
      wrapperCol: {xxl:{ span: 8 },xl:{ span : 11},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, //需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
      } : {};
    }, 
    
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> 
</style>
